<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Zofund JobDispatcher</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>

</head>

<body data-type="taskdetail">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <div class="am-fl tpl-header-logo">
                <div class="am-fl tpl-header-switch-button am-icon-list"><span></span></div>
            </div>
        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar">
            <!-- 菜单 -->
            <ul class="sidebar-nav">
                <li class="sidebar-nav-link">
                    <a href="index.html" class="active">
                        <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="historyjob-list.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>历史Job
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="jobeditor.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i>job编辑器
                    </a>
                </li>
                <!-- <li class="sidebar-nav-link">
                    <a href="tables.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="calendar.html">
                        <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="form.html">
                        <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单

                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="chart.html">
                        <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表

                    </a>
                </li>

                <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
                <li class="sidebar-nav-link">
                    <a href="javascript:;" class="sidebar-nav-sub-title">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                        <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico"></span>
                    </a>
                    <ul class="sidebar-nav sidebar-nav-sub">
                        <li class="sidebar-nav-link">
                            <a href="table-list.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
                            </a>
                        </li>

                        <li class="sidebar-nav-link">
                            <a href="table-list-img.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-nav-link">
                    <a href="sign-up.html">
                        <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
                        <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="login.html">
                        <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="404.html">
                        <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
                    </a>
                </li>
 -->
            </ul>
        </div>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="container-fluid am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span>调度引擎首页 <small>Amaze UI</small></div>
                        <p class="page-header-description">这里加上一些介绍</p>
                    </div>
                </div>

            </div>

            <div class="row-content am-cf">
                <div class="row am-cf">
                    <div class="am-u-sm-12 am-u-md-6">
                        <div class="widget am-cf">
                            <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="taskdetail-chart">
                            </div>
                        </div>
                    </div>

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6 widget-margin-bottom-lg" >
                         <div class="widget-body  am-fr" id = "task-opt-btn">
                              <div class="am-scrollable-horizontal">
                                           <button class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success" onclick="javascript:updateStatus(3);">立刻重跑</button>
                                           <button class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success" onclick="javascript:updateStatus(4);">立刻设为暂停</button>
                                           <button class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success" onclick="javascript:updateStatus(5);">立刻设为结束</button>
                               </div>
                         </div>
                         <div class="widget-body  am-fr">
                                                    <div class="am-scrollable-horizontal ">
                                                        <table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black " id="example-r">
                                                            <thead>
                                                            	<tr><th>基本信息</th></tr>
                                                                <tr><th>属性</th><th>Value</th></tr>
                                                            </thead>
                                                            <tbody id="task-base-info">
                                                            </tbody>
                                                        </table>
                                                    </div>
                         </div>
                     </div>
                </div>
                <div class="row am-cf">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 widget-margin-bottom-lg">
                         <div class="widget-body  am-fr">
                                                    <div class="am-scrollable-horizontal ">
                                                        <table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black " id="example-r">
                                                            <thead>
                                                            	<tr><th>日志列表</th></tr>
                                                                <tr><th>id</th><th>批次号</th><th>开始时间</th>
                                                                    <th>任务结束时间</th><th>执行时长</th><th>插入时间</th><th>重试次数</th>
                                                                    <th>日志内容</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody id="task-log">
                                                            </tbody>
                                                        </table>
                                                    </div>
                         </div>
                     </div>
                </div>
               </div>
        </div>
    </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/amazeui.datatables.min.js"></script>
    <script src="assets/js/dataTables.responsive.min.js"></script>
    <script src="assets/js/app.js"></script>
    <script>
    $(function(){  
        var jobCode = GetQueryString("jobcode");
        var eventtime = GetQueryString("eventtime");
        var taskCode = GetQueryString("taskcode");
        
        if(GetQueryString("ifhis")==1){
    	    $("#task-opt-btn").hide();
        }
        
        $.ajax({
            type: "POST",
            url: "task/cons?url=tasks/"+taskCode,
            success: function(info){
            	if(info.adapterpara!=undefined){
            		var htmlStr = "";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>任务Url</td><td>" + processNull(info.adapterpara)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>Job代码</td><td>" + processNull(info.jobcode)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>任务代码</td><td>" + processNull(info.taskcode)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>任务名</td><td>" + processNull(info.taskname)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>任务描述</td><td>" + processNull(info.taskdesc)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>任务类型</td><td>" + processNull(info.tasktype)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>任务参数列表</td><td>" + processNull(info.paramlist)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+"<tr>";
                	htmlStr = htmlStr+"<td>上游代码</td><td>" + processNull(info.upstreamtaskcodes)+"</td>";
                	htmlStr = htmlStr+"</tr>";
                	htmlStr = htmlStr+'<tr>';
                	htmlStr = htmlStr+'<td>任务脚本</td><td>'+
                			          '<textarea style="width:100%;background:transparent;border-style:none;" rows="8" readonly="readonly">' + 
                			          processNull(info.script)+'</textarea></td>';
                	htmlStr = htmlStr+"</tr>";
                	$("#task-base-info").html(htmlStr);
            	}
            }
    	 });
        
        var queryJson = {
        		"url":"tasklogs?taskcode="+taskCode+"&eventtime="+eventtime
        }
        $.ajax({
            type: "POST",
            url: "task/cons",
            data:queryJson,
            success: function(logs){
            	var htmlStr = "";
            	for(var idx in logs){
            		var log = logs[idx];
            		htmlStr = htmlStr+"<tr>";
            		htmlStr = htmlStr+"<td>" + log.id+"</td>";
            		htmlStr = htmlStr+"<td>" + log.eventtime+"</td>";
            		htmlStr = htmlStr+"<td>" + log.starttime+"</td>";
            		htmlStr = htmlStr+"<td>" + log.endtime+"</td>";
            		htmlStr = htmlStr+"<td>" + log.executiontime+"</td>";
            		htmlStr = htmlStr+"<td>" + log.inserttime+"</td>";
            		htmlStr = htmlStr+"<td>" + log.retrytimes+"</td>";
            		htmlStr = htmlStr+'<td>' + '<textarea style="width:100%;background:transparent;border-style:none;" rows="8" readonly="readonly">' + 
            		                  log.content + '</textarea></td>';
            		htmlStr = htmlStr+"</tr>";
            	}

            	
            	$("#task-log").html(htmlStr);
            }
    	 });
        
    	 $.ajax({
               type: "GET",
               url: "graph/task?jobcode="+jobCode+"&eventtime="+eventtime+"&taskcode="+taskCode,
               success: function(data){
            	    // 基于准备好的dom，初始化echarts实例
            	    var myChart = echarts.init(document.getElementById('taskdetail-chart'));
    				if(null!=data&&null!=data.nodes){
    					  var nodes = data.nodes;
    					  var axisData = data.axisData;
              			  var links = data.links;
                       // 指定图表的配置项和数据
                         option = {
        					    title: {
       	                         	textStyle:{ //设置主标题风格
       	                         		color:'white'//设置主标题字体颜色
    	                    		},
        					    	text: 'Job:'+jobCode+',批次日期:'+eventtime+',task:'+taskCode+' -运行时序'
        					    },
        					    toolbox: {
        					        feature: {
        					            dataZoom: {
        		                             borderColor: 'white'
        					            },
        					            restore: {},
        					            saveAsImage: {}
        					        }
        					    },
        					    tooltip: {
    	                            formatter: function(params){
    	                            	if(typeof(params.value[3]) == "undefined"){
    	                            		return formatDate(params.value[1]) + params.value[0];
    	                            	}
                                        return formatDate(params.value[1]) + "由" + params.value[3]+ "置为" +params.value[0];
                                     } 
        					    },
        					    xAxis: {
        					        type : 'category',
        					        boundaryGap: ['5%', '5%'],
        					        data : axisData,
        	                        axisLine:{
        	                            lineStyle:{
        	                                color:'white'
        	                            }
        	                        }
        					    },
        					    yAxis: {
        					        type : 'value',
        					        axisLabel: {
        					        		formatter: function (value, index) {
        					        			return formatDate(value.toString());
        					        		},
        					        		rotate:40
        					        	},
        					        boundaryGap: ['5%', '5%'],
        					        scale:true,
        	                        axisLine:{
        	                            lineStyle:{
        	                                color:'white'
        	                            }
        	                        }
        					    },
        					    grid: {
        					    	left: 100,
        					    	bottom:80
        					    },
        					    series: [
        					        {
        					            type: 'graph',
        					            layout: 'none',
        					            coordinateSystem: 'cartesian2d',
        					            symbolSize: 20,
        					            itemStyle: {
        					                normal: {
        					                    color: function(params) {
        					                           return params.value[2];
        					                          } 
        					               		  }
        					            },
        					            label: {
        	                                  normal: {
        	                                	    show:true,                  //是否显示标签。
        	                                	    position:"inside",          //标签的位置。// 绝对的像素值[10, 10],// 相对的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
        	                                	    color: 'black',
        	                                	    offset:[0, 0],             //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
        	                                	    formatter: function(params){
        	                                            return formatDate(params.value[1]);
        	                                        }       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
        	                                	}
        	                              },
        					            edgeSymbol: ['circle', 'arrow'],
        					            edgeSymbolSize: [4, 10],
        					            links:links,
        					            data: nodes,
        					            lineStyle: {
        					                normal: {
        					                    color: '#5eb95e',
        					                    width: 2
        					                }
        					            }
        					        }
        					    ]
        					};
                          //实现节点点击事件
                          function focus(param) {
                        	  var option = myChart.getOption();
                         	  var data = param.data;
                         	  //判断节点的相关数据是否正确
                         	  if (data != null && data != undefined) {
                          	  if (data.url != null && data.url != undefined) {
                              //根据节点的扩展属性url打开新页面
                              window.open(data.url);
                          	  }
                             }
                          }

                        //绑定图表节点的点击事件
                         myChart.on("click", focus)
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
    					}
                      }
                });
	  });
    </script>

</body>

</html>